<template>
  <view class="position">
    <view
      :class="activePosition === item._id ? 'activeClassify p' : 'p'"
      v-for="item in position"
      :key="item._id"
      @click="selectPosition(item._id)"
    >
      {{ item.jobTitle }}
    </view>

    <view @click="console.log('nihao')" class="position-list"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";

const position = ref([]);
const activePosition = ref(""); // 当前选中的职位分类ID
const emit = defineEmits(["onSelectPosition"]); // 定义事件

// 获取职位分类数据
uni.request({
  url: "http://1.92.114.25:6624/getPosition",
  method: "GET",
  success: (res: any) => {
    position.value = res.data.data;
  },
  fail: (err) => {
    console.error(err);
  },
});

// 选中职位并触发事件
const selectPosition = (_id: string) => {
  activePosition.value = _id; // 设置当前选中的id
  emit("onSelectPosition", _id); // 触发事件，将选中的职位id发送给父组件
};
</script>

<style lang="scss" scoped>
.position {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;

  .p {
    background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
    color: #7b492b;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .activeClassify {
    background-image: linear-gradient(to bottom, #ffffff, #cccccc);
    box-sizing: border-box;
    color: #000;
    font-weight: bold;
  }
}
</style>
